import React from 'react'
import Reflux from 'reflux'
import Action from '../../action/action'
import Store from '../../store/store'
import ReactMixin from 'react-mixin'

import './messageBox.less'

export default class MessageBox extends React.Component{
    constructor(props){
        super(props);
        this.state = {}
    }
    render(){
        let {type} = this.props;
        let box;
        switch(type){
            case "0" :
                box = <MessageBox0 text={this.props.text}
                                   cancel={this.props.cancel}
                                   sure={this.props.sure}/>;
                break;
            case "1" :
                box = <MessageBox1 cancel={this.props.cancel}
                                   sure={this.props.sure}
                                   list={this.props.list}/>
        }
        return(
            <div className="messageBox">
                {box}
            </div>
        )
    }
}


//弹框样式1
class MessageBox0 extends React.Component{
    render(){
        let {text,cancel,sure} = this.props;
        return(
            <div className="messageBox0">
                <div className="messageBoxBg" onClick={cancel}></div>
                <div className="box0">
                    <p>{text}</p>
                    <div>
                        <span onClick={cancel}>取消</span>
                        <span className="active" onClick={sure}>确定</span>
                    </div>
                </div>
            </div>
        )
    }
}
//弹框样式2
class MessageBox1 extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            startX : 0,
            startY : 0,
            nowLocal : -2,
            typeValue : "",
            list : this.props.list
        }
    }
    touchStart(e){
        let touches = e.touches[0];
        this.setState({
            startX:touches.clientX,
            startY:touches.clientY,
        })
    }
    touchMove(e){
        e.preventDefault()
    }
    touchEnd(e){
        let touches = e.changedTouches[0],
            endX = touches.clientX,
            endY = touches.clientY,
            distanceX = this.state.startX - endX,
            distanceY = this.state.startY -endY;
        if(Math.round(distanceY/40) + this.state.nowLocal < -2){
            this.setState({
                nowLocal : -2,
                typeValue : this.state.list[0],
            })
        }else if(Math.round(distanceY/40) + this.state.nowLocal > this.props.list.length-3){
            this.setState({
                nowLocal : this.props.list.length-3,
                typeValue : this.state.list[this.props.list.length-1],
            })
        }else{
            this.setState({
                nowLocal :Math.round(distanceY/40)+this.state.nowLocal,
                typeValue : this.state.list[Math.round(distanceY/40)+this.state.nowLocal+2],
            })
        }
    }
    componentDidUpdate(e){
        Action.saveCheckBankListIndex(this.state.nowLocal+2)
    }
    render(){
        let nowLocal = this.state.nowLocal,
            {cancel,sure,list} = this.props,
            _list = [];
        list.map((item,i)=>{
            _list.push(
                <li key={i}>
                    <span>{item}</span>
                </li>
            )
        });
        return(
            <div className="messageBox1">
                <div className="messageBoxBg" onClick={cancel}></div>
                <div className="box1">
                    <header>
                        <button onClick={cancel}>取消</button>
                        <button onClick={sure}>完成</button>
                    </header>
                    <section onTouchStart={this.touchStart.bind(this)}
                             onTouchEnd={this.touchEnd.bind(this)}
                             onTouchMove={this.touchMove.bind(this)}>
                        <div>
                            <ul style={{top:-40*nowLocal+"px"}}>
                                {_list}
                            </ul>
                        </div>
                        <span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </span>
                    </section>
                </div>
            </div>
        )
    }
}

ReactMixin.onClass(MessageBox1,Reflux.connect(Store))

